/* imports */
@import "common.less";
@import "elements.less";
@import "settings.less";


/* CSS Resets */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,q,small,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;margin:0;padding:0}article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object{display:block}a img{border:0}figure{position:relative}figure img{width:100%}

ul,li{ list-style: none;}
a{ text-decoration: none; }

/*
	Main Styling
*/
#wrapper {
	.oxygen;
	font-size: 13px;
	line-height: 18px;
	color: #333333;

	h2 {
		font-size: 24px;
		line-height: 36px;
	}

	textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"],
	input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"],
	input[type="color"] {
		.input;
	}

	label {
		display: block;
		margin-bottom: 5px;
	}
}

/* Fix for datetimepicker partially being covered by top menu*/

#ui-datepicker-div {
  margin-top: 40px !important;
  z-index: 999 !important;
}
#ui-timepicker-div dl dd {
    margin: 0px 10px 10px 85px;
}

/* common structure */
#wrapper {

	header {
		.verticalGradient(#5a6064, #4a4f52);
		.boxShadow(0, 1px, 2px, rgba(0, 0, 0, 0.37));
		border-bottom: 1px solid #44484b;
		text-shadow: black 0 1px 0;
		height: 34px;
		overflow: visible;
		position: relative;
		z-index: 900;
		position: fixed;
		top: 0;
		right: 0;
		left: 0;

		h1 {
			float: left;
			margin: 0;
			border-right: 1px solid #999;

			a {
				.headerButton;
				padding: 8px 15px 9px;
				font-size: 19px;
				border-right: 1px solid #555;

				&:hover {
					.verticalGradient(#444, #333);
				}
			}
		}

		a, span {
			color: #eee;
			display: inline-block;
			cursor: pointer;
		}

		.iconButton {
			.headerButton;
			padding: 0;
			display: none;

			> div {
				height: 35px;
			}
		}

		a#menu_button {
			.iconButton;

			> div {
				width: 45px;
				background: url(../img/menu-icon.png) no-repeat center center;
			}
		}

		a#filter_button {
			.iconButton;
			margin-left: -3px;

			&.hidden {
				display: none !important;
			}

			> div {
				width: 41px;
				background: url(../img/filter-icon.png) no-repeat center center;
			}
		}

		#mobile_menu_wrapper {
			display: none;
			position: fixed;
			top: 36px;
			bottom: 0;
			left: 0;
			min-width: 300px;

			.mobileMenuPadding {
				padding: 12px 14px;
			}

			ul#mobile_menu {
				.verticalGradient(#333, #444);
				min-width: 300px;
				min-height: 100%;

				li {
					border-bottom: 1px solid #44484b;

					&.menu {
						> span {
							display: block;
							.mobileMenuPadding;
						}

						ul {
							display: none;
							border-left: 20px solid #222;
						}
					}
				}
			}

			a {
				.mobileMenuPadding;
				display: block;
			}
		}

		ul#menu, ul#lang_menu {
			display: inline-block;

			> li {
				display: inline-block;
				position: relative;
				.verticalGradient(#5a6064, #4a4f52);
				margin-left: -3px;

				a, span {
					.headerButtonPadding;
				}

				&.menu {

				}

				ul {
					position: absolute;
					top: 35px;
					left: 0;
					display: none;
					.verticalGradient(#333, #444);
					.boxShadow(0, 2px, 3px, #555);
					.borderRadiusBottom(2px);

					a {
						display: block;
						white-space: nowrap;
						overflow: hidden;
						border-bottom: 1px solid #666;

						&:hover {
							color: #fff;
						}
					}

					li:last-child {
						a {
							border-bottom: none;
						}
					}

					li.menu {
						position: relative;

						&.current {
							.verticalGradient(#333, #444);
						}

						&:hover {
							> ul {

							}
						}

						ul {
							top: 0;
							left: 100%;
							z-index: -1;
						}
					}
				}

				&.current, &:hover {
					.verticalGradient(#444, #333);
				}

				&:first-child {
					margin-left: 0;
				}

			}
		}

		div#right_nav {
			display: block;
			position: absolute;
			top: 0;
			right: 0;

			ul#lang_menu {
				display: inline-block;
				border-right:1px solid #999999;
			}

			a#back_to_site {
				.headerButton;
				margin-left: -3px;
			}

			a#logout {
				.headerButton;
				margin-left: -3px;
			}
		}
	}

	footer {

	}
}


/*
 * Admin page
 */
#admin_page {

	position: relative;

	label {
		margin-bottom: 3px;
		font-weight: bold;
	}

	div#sidebar {
		float: right;
		margin-right: 13px;
		margin-top: 60px;
		width: 245px;

		h2 {
			color: #444;
			text-shadow: #DDD 0 1px 0;
			margin-bottom: 15px;
		}

		div.filters {
			> div {
				margin-bottom: 10px;
				position: relative;

				select, input[type=hidden] {
					width: 225px;
				}

				div.loader {
					position: absolute;
					top: 26px;
					left: -21px;
					width: 16px;
					height: 16px;
					background: url(../img/loader.gif) no-repeat;
					.opacity(0.3);
				}

				p.description {
					width: 90%;
					margin: 0 0 7px 2px;
				}

				p.description_below {
					width: 90%;
					margin: 2px 0 0 2px;
				}

				&.min_max {

					input[type=text] {
						width: 87px;
					}

					span.symbol {
						position: absolute;
						top: 27px;
						left: -15px;
					}

					&.datetime {
						input[type=text] {
							font-size: 11px;
						}
					}
				}

				&.color {
					div.color_preview {
						height: 8px;
						margin: 0 33px 0 1px;
						.boxShadow(0px, 1px, 2px, #aaa);
					}
				}
			}
		}
	}

	#content {
		padding-top: 35px;

		div.table_container {
			position: relative;

			div.results_header {
				.verticalGradient(#efefef, #dfe1e2);
				.boxShadow(0, 1px, 2px, rgba(0, 0, 0, 0.37));
				text-shadow: white 0 1px 0;
				border: solid 1px #d4d4d4;
				border-top-color: #e6e6e6;
				border-bottom-color: #EEE;
				font-size: 1.0em;
				font-weight: bold;
				line-height: 18px;
				color: #5e6469;
				position: relative;
				z-index: 800;
				margin-bottom: 3px;
				padding: 6px 0;

				h2 {
					padding: 0 15px;
					display: inline-block;
					vertical-align: middle;
				}

				div.actions {
					position: absolute;
					top: 8px;
					right: 9px;

					a, input {
						display: inline-block;
						.greyButton;
						text-shadow: none;
						margin-left: 10px;
					}
				}

				div.action_message {
					text-align: right;
					margin-left: 500px;
					padding-bottom: 10px;
					margin-right: 12px;
				}
			}

			div.page_container {
				.verticalGradient(#efefef, #dfe1e2);
				.boxShadow(0, 1px, 2px, rgba(0, 0, 0, 0.37));
				text-shadow: white 0 1px 0;
				border: solid 1px #d4d4d4;
				border-top-color: #e6e6e6;
				border-bottom-color: #EEE;
				font-size: 1.0em;
				font-weight: bold;
				line-height: 18px;
				color: #5e6469;
				position: relative;
				z-index: 801;
				margin-bottom: 3px;
				padding: 5px 0;

				div.paginator {
					display: inline-block;
					margin-left: 15px;
					margin-right: 15px;
					vertical-align: middle;

					input {
						display: inline-block;
						vertical-align: baseline;
						margin-bottom: 0;

						&[type=text] {
							width:30px;
						}
					}
				}

				div.per_page {
					vertical-align: middle;
					position: absolute;
					right: 15px;
					top: 5px;
					overflow: hidden;

					input {
						.noTransition;
						border: none;
					}

					input[type=hidden] {
						width: 70px;
					}
				}
			}

			div.table_scrollable {
				width:100%;
				overflow-x:auto;
			}

			table.results {
				width: 100%;
				margin-bottom: 10px;
				border: 0;
				border-spacing: 0;

				th {
					.verticalGradient(#efefef, #dfe1e2);
					text-shadow: white 0 1px 0;
					border: solid 1px #d4d4d4;
					border-top-color: #e6e6e6;
					border-bottom-color: #cdcdcd;
					border-right: none;
					-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 1px white inset;
					-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 1px white inset;
					-ms-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 1px white inset;
					-o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 1px white inset;
					box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 1px white inset;
					font-weight: bold;
					line-height: 18px;
					color: #5e6469;
					padding: 5px 12px 3px 12px;
					text-align: left;

					div {
						color: #5e6469;
						text-decoration: none;
						display: block;
						white-space: nowrap;
						.overflowEllipsis;
					}

					&.sortable {
						cursor: pointer;

						div {
							background: url("../img/orderable.png") no-repeat 0 4px;
							padding-left: 13px;
							cursor: pointer;
						}
					}

					&.sorted-asc, &.sorted-desc {
						.verticalGradient(#e2e2e2, #d2d4d6);
					}

					&.sorted-asc {
						div {
							background-position: 0 -27px;
						}
					}

					&.sorted-desc {
						div {
							background-position: 0 -56px;
						}
					}

					&:last-child {
						border-right: solid 1px #d4d4d4;
					}
				}

				tr.result {
					cursor:pointer;

					td {
						padding: 10px 12px 8px 12px;
						border-bottom: 1px solid #e8e8e8;
						vertical-align: top;
					}

					&.even {
						td {
							background: #f4f5f5;
						}
					}

					&.selected {
						td {
							background: #d9e4ec;
						}
					}

					&:hover {
						outline: 1px solid #ddd;
					}

				}
			}

			div.loading_rows {
				position: absolute;
				top: 95px;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: #000;
				opacity: 0.50;
				-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
				filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
				filter: alpha(opacity=50);
				text-align: center;

				> div {
					position: absolute;
					top: 45%;
					left: 0;
					right: 0;
					color: #fff;
					font-size: 35px;
					text-shadow: #000 1px 1px 1px;
				}
			}

			div.no_results {
				position: absolute;
				top: 180px;
				left: 0;
				right: 0;
				bottom: 0;
				text-align: center;

				> div {
					color: #444;
					font-size:28px;
					text-shadow: #ddd 1px 1px 1px;
				}
			}

		}

		/* edit form */
		div.item_edit_container {
			position: absolute;
			top: 35px;
			bottom: 0;
			right: 0;
			width: 285px;
			overflow: hidden;

			h2 {
				margin-bottom: 15px;
			}

			div.item_edit {
				position: relative;
				padding-top: 25px;
				padding-left: 27px;
				background: #D9E4EC;
				min-height: 430px;
				width: 258px;
				.boxShadow(-1px, 1px, 2px, rgba(0, 0, 0, 0.4));
				margin-left: 2px;
				margin-bottom: 2px;

				form.edit_form {
					.editForm;
				}

				div.loading {
					position: absolute;
					top: 200px;
					left: 50%;
					font-size: 20px;
					margin-left: -36px;
				}
			}
		}

	}
}

.lw-colorpicker {
	z-index: 807;
}

.select2-search input {
	width: 100% !important;
}


/* media queries */
@import "media_queries.less";